// Editor Geometry

// Editor margins left and right for all breakpoints in both fullscreen and
// normal mode.
@editor-margin-fullscreen-sm:   50px;
@editor-margin-fullscreen-md:  100px;
@editor-margin-fullscreen-lg:  150px;
@editor-margin-fullscreen-xl:  200px;
@editor-margin-fullscreen-xxl: 350px;

@editor-margin-normal-sm:  20px;
@editor-margin-normal-md:  50px;
@editor-margin-normal-lg: 100px;

#editor {
  position: fixed;
  top: @toolbar-height;
  right: 0;
  bottom: 0;
  left: calc(20% + 10px);
  overflow-x: hidden;
  overflow-y: auto;

  &.fullscreen {
    left: 0%; padding-left: 0px;

    // Hide the tabs in distraction-free
    #document-tabs { display: none; }
  }

  // JQUERY UI - THEME (necessary for resizable to work)
  .ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
  }

  .ui-resizable-disabled .ui-resizable-handle,
  .ui-resizable-autohide .ui-resizable-handle {
    display: none;
  }

  .ui-resizable-w {
    cursor: ew-resize;
    width: 10px;
    left: 0px;
    top: 0;
    height: 100%;
    padding: 2px;

    &::after {
      content: "";
      position: absolute;
      width: 6px;
      height: calc(100% - 4px);
    }
  }

    .CodeMirror {
      // The CodeMirror editor needs to respect the new tabbar; it cannot take
      // up 100 % all for itself anymore.
      height: calc(100% - @tabbar-height);
      margin-top: @tabbar-height;
      margin-left: 0.5em;
      cursor: text;
      font-family: inherit;

      @media(min-width: 1025px) { margin-left: @editor-margin-normal-lg; }
      @media(max-width: 1024px) { margin-left: @editor-margin-normal-md; }
      @media(max-width:  900px) { margin-left: @editor-margin-normal-sm; }
    }

    .CodeMirror-code {
      margin: 5em 0em;
      @media(max-width: 1024px) { margin: @editor-margin-fullscreen-md 0em; }

      .mute { opacity:0.2; }
    }

    .CodeMirror-scroll {
      padding-right: 5em;
      @media(min-width: 1025px) { padding-right: @editor-margin-normal-lg; }
      @media(max-width: 1024px) { padding-right: @editor-margin-normal-md; }
      @media(max-width:  900px) { padding-right: @editor-margin-normal-sm; }
      overflow-x: hidden !important; // Necessary to hide the horizontal scrollbar

      // We need to override a negative margin
      // and a bottom padding from the standard
      // CSS for some calculations to be correct
      // such as the table editor
      margin-bottom: 0px;
      padding-bottom: 0px;
    }

    // Reduce font size of math a bit
    .katex { font-size: 1.1em; }
  }

// If the menu bar is shown, pull down the editor
body.show-menubar #editor {
  top: @toolbar-height + @menubar-height;
}


// CodeMirror fullscreen
.CodeMirror-fullscreen {
  position: fixed !important; // Have to override another relative
  margin-top: 0px !important; // Normally 25px for tab bar, but not in distraction free
  top: @toolbar-height;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  z-index: 500;

  @media(min-width: 1301px) { margin-left: @editor-margin-fullscreen-xxl !important; }
  @media(max-width: 1300px) { margin-left: @editor-margin-fullscreen-xl  !important; }
  @media(max-width: 1100px) { margin-left: @editor-margin-fullscreen-lg  !important; }
  @media(max-width: 1000px) { margin-left: @editor-margin-fullscreen-md  !important; }
  @media(max-width:  800px) { margin-left: @editor-margin-fullscreen-sm  !important; }

  .CodeMirror-scroll {
    @media(min-width: 1301px) { padding-right: @editor-margin-fullscreen-xxl !important; }
    @media(max-width: 1300px) { padding-right: @editor-margin-fullscreen-xl  !important; }
    @media(max-width: 1100px) { padding-right: @editor-margin-fullscreen-lg  !important; }
    @media(max-width: 1000px) { padding-right: @editor-margin-fullscreen-md  !important; }
    @media(max-width:  800px) { padding-right: @editor-margin-fullscreen-sm  !important; }
  }
}

// Account for the menubar, if it is shown
body.show-menubar .CodeMirror-fullscreen {
  top: @toolbar-height + @menubar-height;
}

// Define the readability classes
.cm-readability-0   { background-color: hsv(100, 70%, 95%); color: #444444 !important; }
.cm-readability-1   { background-color: hsv( 90, 70%, 95%); color: #444444 !important; }
.cm-readability-2   { background-color: hsv( 80, 70%, 95%); color: #444444 !important; }
.cm-readability-3   { background-color: hsv( 70, 70%, 95%); color: #444444 !important; }
.cm-readability-4   { background-color: hsv( 60, 70%, 95%); color: #444444 !important; }
.cm-readability-5   { background-color: hsv( 50, 70%, 95%); color: #444444 !important; }
.cm-readability-6   { background-color: hsv( 40, 70%, 95%); color: #444444 !important; }
.cm-readability-7   { background-color: hsv( 30, 70%, 95%); color: #444444 !important; }
.cm-readability-8   { background-color: hsv( 10, 70%, 95%); color: #444444 !important; }
.cm-readability-9   { background-color: hsv(  0, 70%, 95%); color: #444444 !important; }
.cm-readability-10  { background-color: hsv(350, 70%, 95%); color: #444444 !important; }
